<template>
  <h1>Popover 示例</h1>
  <Demo :component="PopoverDemo1" />
  <Demo :component="PopoverDemo2" />
  <h2>Popover Attributes</h2>
  <Table :dataSource="dataSource" :columns="columns" />
</template>

<script lang="ts">
import Demo from "./Demo/index.vue";
import PopoverDemo1 from "./Demo/PopoverDemo1.vue";
import PopoverDemo2 from "./Demo/PopoverDemo2.vue";
import Table from "../lib/table/Table.vue";

export default {
  components: {
    Demo,
    Table,
  },
  setup(props) {
    const dataSource = [
       {
        id: 1,
        params: 'trigger',
        illustrate: '自定义点击弹出还是鼠标悬浮弹出',
        type: '-',
        optional: 'click/hover',
        defaults: 'click',
      },
      {
        id: 2,
        params: 'position',
        illustrate: '自定义Popover弹出位置',
        type: '-',
        optional: 'top/bottom/left/right',
        defaults: 'top'
      }
    ];
    const columns = [
      { title: '参数', prop: 'params', width: '300' },
      { title: '说明', prop: 'illustrate', width: '300' },
      { title: '类型', prop: 'type', width: '100' },
      { title: '可选值', prop: 'optional', width: '100' },
      { title: '默认值', prop: 'defaults' },
    ]
    return { PopoverDemo1, PopoverDemo2,dataSource,  columns };
  },
};
</script>

<style></style>
